// 使用react-redux提供的高阶组件connect帮我们去连接视图组件

import { connect } from "react-redux"
import asyncActionCreator from "../../store/actions/asyncActionCreator"
import { useEffect } from "react"
//映射函数

// 通过映射函数,将redux的状态映射到组件的props

let mapStateToProps = (state) => {
    return {
        product: state.product
    }
}


let mapDispatchToProps = (dispatch) => {
    return {
        fetchProduct() {
            //通过第一个dispatch发出异步请求
            dispatch(asyncActionCreator("GET_PRODUCT", "getProduct"))
        }
    }
}

const Cart = (props) => {
    // console.log(props)
    let { fetchProduct, product } = props;

    //dom挂载完毕之后 发起异步请求

    useEffect(() => {
        fetchProduct()
    }, [])


    let lis = product.map(item => {
        return (
            <li key={item.id}>{item.title}</li>
        )
    })

    //需要拿到product数据中的第0项中的 dec中的size这个数组 进行遍历

    console.log(product)

    // 第一种处理方式 使用可链入语法
    // product[0]?.desc.size.forEach(item => {
    //     console.log(item)
    // })

    // 第二种方式 

    try {
        product[0].desc.size.forEach(item => {
            console.log(item)
        })
    } catch (e) {
        // console.log(e)
    }

    return (
        <fieldset>
            <legend>Cart</legend>
            <button onClick={fetchProduct}>点击发送请求</button>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart)